<template>
    <div class="app-container" style="padding: 5px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="一级品类接单走势" name="first">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="查询方式" prop="qMode">
                        <el-select v-model="queryParams.qMode" filterable @change="handleFirstChange">
                            <el-option
                            v-for="item in modeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年份" prop="year" v-if="queryParams.qMode!='yy'">
                        <el-select v-model="queryParams.year" filterable @change="handleFirstChange">
                            <el-option
                            v-for="item in yearList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="大品类" prop="brand">
                        <el-select v-model="queryParams.brand" filterable @change="handleFirstChange">
                            <el-option
                            v-for="item in brandList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据类型" prop="type">
                        <el-select v-model="queryParams.type" filterable @change="handleFirstChange">
                            <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div ref="chart" style="width: 100%; height: 820px;"></div>
            </el-tab-pane>
            <el-tab-pane label="一级品类占比" name="second">
                <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="查询方式" prop="qMode">
                        <el-select v-model="queryParams1.qMode" filterable @change="handleSecondChangeMode">
                            <el-option
                            v-for="item in modeList1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年份" prop="year">
                        <el-select v-model="queryParams1.year" filterable @change="handleSecondChangeYear">
                            <el-option
                            v-for="item in yearList1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="subTime" v-if="queryParams1.qMode!='yy'">
                        <el-select v-model="queryParams1.subTime" filterable @change="handleSecondChangeSubTime">
                            <el-option
                            v-for="item in subTimeList1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-col :span="8">
                        <el-card>
                            <div ref="chart1" style="width: 100%; height: 500px;"></div>
                        </el-card>
                        
                        <el-card style="margin-top: 5px;height:300px;">
                            <el-table :data="htList" border stripe>
                                <el-table-column label="合同" align="center">
                                    <el-table-column label="品类" align="center" prop="brand" width="65"></el-table-column>
                                    <el-table-column label="单品金额" align="center" prop="money">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.money).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="全品金额" align="center" prop="total_money_brd">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.total_money_brd).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="金额占比" align="center" prop="plmoneyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plmoneyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="单品数量" align="center" prop="qty" width="75"></el-table-column>
                                    <el-table-column label="全品数量" align="center" prop="total_qty_brd" width="75"></el-table-column>
                                    <el-table-column label="数量占比" align="center" prop="plqtyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plqtyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-left: 5px;">
                            <div ref="chart2" style="width: 100%; height: 500px;"></div>
                        </el-card>
                        <el-card style="margin-left: 5px;margin-top: 5px;height:300px;">
                            <el-table :data="ckList" border stripe>
                                <el-table-column label="出库" align="center">
                                    <el-table-column label="品类" align="center" prop="brand" width="65"></el-table-column>
                                    <el-table-column label="单品金额" align="center" prop="money">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.money).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="全品金额" align="center" prop="total_money_brd">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.total_money_brd).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="金额占比" align="center" prop="plmoneyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plmoneyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="单品数量" align="center" prop="qty" width="75"></el-table-column>
                                    <el-table-column label="全品数量" align="center" prop="total_qty_brd" width="75"></el-table-column>
                                    <el-table-column label="数量占比" align="center" prop="plqtyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plqtyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-left: 5px;">
                            <div ref="chart3" style="width: 100%; height: 500px;"></div>
                        </el-card>
                        <el-card style="margin-left: 5px;margin-top: 5px;height:300px;">
                            <el-table :data="phtList" border stripe>
                                <el-table-column label="预出库" align="center">
                                    <el-table-column label="品类" align="center" prop="brand" width="65"></el-table-column>
                                    <el-table-column label="单品金额" align="center" prop="money">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.money).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="全品金额" align="center" prop="total_money_brd">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.total_money_brd).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="金额占比" align="center" prop="plmoneyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plmoneyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="单品数量" align="center" prop="qty" width="75"></el-table-column>
                                    <el-table-column label="全品数量" align="center" prop="total_qty_brd" width="75"></el-table-column>
                                    <el-table-column label="数量占比" align="center" prop="plqtyrate" width="75">
                                        <template slot-scope="scope">
                                            {{ Number(scope.row.plqtyrate).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="二级品类单品接单走势" name="third">
                <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="查询方式" prop="qMode">
                        <el-select v-model="queryParams2.qMode" filterable @change="changeThirdMode">
                            <el-option
                            v-for="item in modeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年份" prop="year" v-if="queryParams2.qMode!='yy'">
                        <el-select v-model="queryParams2.year" filterable @change="changeThirdYear">
                            <el-option
                            v-for="item in yearList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="大品类" prop="brand">
                        <el-select v-model="queryParams2.brand" filterable @change="changeThirdBrand">
                            <el-option
                            v-for="item in brandList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级品类" prop="bigname">
                        <el-select v-model="queryParams2.bigname" filterable @change="changeThirdBigname">
                            <el-option
                            v-for="item in bignameList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据类型" prop="type">
                        <el-select v-model="queryParams2.type" filterable @change="changeThirdType">
                            <el-option
                            v-for="item in typeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div ref="chart4" style="width: 100%; height: 820px;"></div>
            </el-tab-pane>
            <el-tab-pane label="二级品类单品占比" name="furth">
                <el-form :model="queryParams3" ref="queryForm3" size="small" :inline="true" label-width="80px" label-position="right">
                    <el-form-item label="查询方式" prop="qMode">
                        <el-select v-model="queryParams3.qMode" filterable @change="changethirdMode">
                            <el-option
                            v-for="item in modeList3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年份" prop="year">
                        <el-select v-model="queryParams3.year" filterable @change="changethirdYear">
                            <el-option
                            v-for="item in yearList3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="subTime" v-if="queryParams3.qMode!='yy'">
                        <el-select v-model="queryParams3.subTime" filterable @change="changethirdSubTime">
                            <el-option
                            v-for="item in subTimeList3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="大品类" prop="brand">
                        <el-select v-model="queryParams3.brand" filterable @change="changethirdBrand">
                            <el-option
                            v-for="item in brandList3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-col :span="8">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <center><span style="font-weight: bold;color:#0099ff;font-size: 16px;">合同</span></center>
                            </div> 
                            <div ref="chart5" style="width: 100%; height: 820px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-left:5px;">
                            <div slot="header" class="clearfix">
                                <center><span style="font-weight: bold;color:#0099ff;font-size: 16px;">出库</span></center>
                            </div> 
                            <div ref="chart6" style="width: 100%; height: 820px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-left:5px;">
                            <div slot="header" class="clearfix">
                                <center><span style="font-weight: bold;color:#0099ff;font-size: 16px;">预出库</span></center>
                            </div> 
                            <div ref="chart7" style="width: 100%; height: 820px;"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { listXsbYjbmDicts,listXsbBigBrandSummary,listXsbYjbmPlzbDicts,listXsbBigDptBrandSummary } from "@/api/system/weekly/weeklydashboard";
import { listXsbYjbmBignameDicts,listXsbYjbmBignameSummary,listXsbYjbmBignamePlzbDicts,listXsbBingnamePlzbSummary } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';

export default {
    name: "Xsbyjbmdash",
    data() {
        return {
            activeName: 'first',
            modeList: [],
            yearList: [],
            brandList: [],
            typeList: [],
            queryParams: {
                qMode: null,
                year: null,
                brand: null,
                type: null,
            },
            modeList1: [],
            yearList1: [],
            subTimeList1: [],
            queryParams1: {
                qMode: null,
                year: null,
                subTime: null,
            },
            modeList2: [],
            yearList2: [],
            brandList2: [],
            bignameList2: [],
            typeList2: [],
            queryParams2: {
                qMode: null,
                year: null,
                brand: null,
                type: null,
                bigname: null,
            },
            modeList3: [],
            yearList3: [],
            subTimeList3: [],
            brandList3: [],
            queryParams3: {
                qMode: null,
                year: null,
                subTime: null,
                brand: null,
            },
            htList: [],
            ckList: [],
            phtList: [],
        }
    },
    created() {
        this.queryParams.qMode = "ym";
        this.getYjbmDicts();
    },
    mounted(){
        
    },
    methods: {
        handleClick(tab, event) {
            if(tab.index==0){

            }else if(tab.index==1){
                this.queryParams1.qMode = "ym";
                this.getYjbmPlzbDicts();
            }else if(tab.index==2){
                this.queryParams2.qMode = "ym";
                this.getYjbmBignameDicts();
            }else if(tab.index==3){
                this.queryParams3.qMode = "ym";
                this.getYjbmBignamePlzbDicts();
            }
        },
        changethirdMode(){
            this.queryParams3.year = null;
            this.queryParams3.subTime = null;
            this.queryParams3.brand = null;
            this.getYjbmBignamePlzbDicts();
        },
        changethirdYear(){
            this.queryParams3.subTime = null;
            this.queryParams3.brand = null;
            this.getYjbmBignamePlzbDicts();
        },
        changethirdSubTime(){
            this.queryParams3.brand = null;
            this.getYjbmBignamePlzbDicts();
        },
        changethirdBrand(){
            this.getBingnamePlzbSummary();
        },
        getYjbmBignamePlzbDicts(){
            listXsbYjbmBignamePlzbDicts(this.queryParams3).then(res =>{
                this.modeList3 = res.data.modes;
                this.yearList3 = res.data.years;
                this.queryParams3.year = res.data.year;
                this.subTimeList3 = res.data.subTimes;
                this.queryParams3.subTime = res.data.subTime;
                this.brandList3 = res.data.brands;
                this.queryParams3.brand = res.data.brand;
                this.getBingnamePlzbSummary();
            })
        },
        changeThirdMode(){
            this.queryParams2.year = null;
            this.queryParams2.brand = null;
            this.queryParams2.bigname = null;
            this.queryParams2.type = null;
            this.getYjbmBignameDicts();
        },
        changeThirdYear(){
            this.queryParams2.brand = null;
            this.queryParams2.bigname = null;
            this.queryParams2.type = null;
            this.getYjbmBignameDicts();
        },
        changeThirdBrand(){
            this.queryParams2.bigname = null;
            this.queryParams2.type = null;
            this.getYjbmBignameDicts();
        },
        changeThirdBigname(){
            this.queryParams2.type = null;
            this.getYjbmBignameDicts();
        },
        changeThirdType(){
            this.getYjbmBignameSummary();
        },
        getYjbmBignameDicts(){
            listXsbYjbmBignameDicts(this.queryParams2).then(res =>{
                this.modeList2 = res.data.modes;
                this.yearList2 = res.data.years;
                this.queryParams2.year = res.data.year;
                this.brandList2 = res.data.brands;
                this.queryParams2.brand = res.data.brand;
                this.bignameList2 = res.data.bignames;
                this.queryParams2.bigname = res.data.bigname;
                this.typeList2 = res.data.types;
                this.queryParams2.type = res.data.type;
                this.getYjbmBignameSummary();
            })
        },
        handleSecondChangeMode(){
            this.queryParams1.year = null;
            this.queryParams1.subTime = null;
            this.getYjbmPlzbDicts();
        },
        handleSecondChangeYear(){
            this.queryParams1.subTime = null;
            this.getYjbmPlzbDicts();
        },
        handleSecondChangeSubTime(){
            this.getBrandSummary();
        },
        getYjbmPlzbDicts(){
            listXsbYjbmPlzbDicts(this.queryParams1).then(res =>{
                this.queryParams1.year = res.data.year;
                this.modeList1 = res.data.modes;
                this.yearList1 = res.data.years;
                this.subTimeList1 = res.data.subTimes;
                this.queryParams1.subTime = res.data.subTime;
                this.getBrandSummary();
            })
        },
        getYjbmDicts(){
            listXsbYjbmDicts(this.queryParams).then(res =>{
                this.modeList = res.data.modes;
                this.yearList = res.data.years;
                this.queryParams.year = res.data.year;
                this.brandList = res.data.brands;
                this.queryParams.brand = res.data.brand;
                this.typeList = res.data.types;
                this.queryParams.type = res.data.type;
                this.getFirstData();
            })
        },
        handleFirstChange(){
            this.getFirstData();
        },
        getFirstData(){
            listXsbBigBrandSummary(this.queryParams).then(res =>{
                let typeName = "";
                for(let i=0;i<this.typeList.length;i++){
                    if(this.queryParams.type==this.typeList[i].value){
                        typeName = this.typeList[i].label;
                    }
                }
                let labels = [];
                if(res.data.length>0){
                    for(let i=0;i<res.data.length;i++){
                        labels.push(res.data[i].tag_date)
                    }
                }
                const chart = echarts.init(this.$refs.chart);
                let clsName ="";
                for(let i=0;i<this.typeList.length;i++){
                    if(this.queryParams.type==this.typeList[i].value){
                        clsName = this.typeList[i].label;
                    }
                }
                let titlestr = "";
                if(this.queryParams.qMode=="yy"){
                    titlestr = "销售部-年度-"+this.queryParams.brand+"-"+clsName;
                }else{
                    if(this.queryParams.qMode=="yq"){
                        titlestr = "销售部-"+this.queryParams.year+"年季度-"+this.queryParams.brand+"-"+clsName;
                    }else if(this.queryParams.qMode=="ym"){
                        titlestr = "销售部-"+this.queryParams.year+"年月份-"+this.queryParams.brand+"-"+clsName;
                    }else if(this.queryParams.qMode=="wk"){
                        titlestr = "销售部-"+this.queryParams.year+"年各周-"+this.queryParams.brand+"-"+clsName;
                    }
                }
                const option = {
                    title: {
                        text: titlestr,
                        textStyle: {
                            fontSize: 16, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['数量', '金额'],
                        left: 10,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: labels,
                            axisLabel: {
                                rotate: 45, // 设置 X 轴文字旋转角度
                                interval: 0, // 强制显示所有标签
                                fontSize: 12, // 文字大小
                                color: '#333' // 文字颜色
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量(颗/株)',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '金额(元)',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.map(item => ({
                                value: item.qty,
                                name: item.tag_date,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+item.tag_date+"<br/>数据类型: "+typeName+"<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>当期金额："+Number(item.money).toFixed(2)+"元<br />当期数量："+item.qty+"<br />当期品类金额占比："+item.bmmoneyrate+"%<br />当期品类数量占比："+item.bmqtyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>环比金额："+Number(item.prev_money).toFixed(2)+"元<br />环比数量："+item.prev_qty+"<br />金额环比率："+(Number(item.money_qoq_growth)*100).toFixed(2)+"%<br />数量环比率："+(Number(item.qty_qoq_growth)*100).toFixed(2)+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:green;'>同比金额："+Number(item.yoy_prev_money).toFixed(2)+"元<br />同比数量："+item.yoy_prev_qty+"<br />金额同比率："+(Number(item.money_yoy_growth)*100).toFixed(2)+"%<br />数量同比率："+(Number(item.qty_yoy_growth)*100).toFixed(2)+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:orange;'>全品类金额："+Number(item.total_money).toFixed(2)+"元<br />全品类数量："+item.total_qty+"<br />-----------------------------</span>",
                            })),
                        },
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.tag_date,
                            })),
                        }
                    ]
                };
                chart.setOption(option);
            })
        },
        getBrandSummary(){
            listXsbBigDptBrandSummary(this.queryParams1).then(res =>{
                this.htList = res.data.ht;
                this.ckList = res.data.ck;
                this.phtList = res.data.pht;
                let label1 = [];
                for(let i=0;i<res.data.ht.length;i++){
                    label1.push(res.data.ht[i].brand);
                }
                let label2= [];
                for(let i=0;i<res.data.ck.length;i++){
                    label2.push(res.data.ck[i].brand);
                }
                let label3 = [];
                for(let i=0;i<res.data.pht.length;i++){
                    label3.push(res.data.pht[i].brand);
                }
                const chart1 = echarts.init(this.$refs.chart1);
                const chart2 = echarts.init(this.$refs.chart2);
                const chart3 = echarts.init(this.$refs.chart3);
                let titleStr = "";
                let timestr = "";
                if(this.queryParams1.qMode=="yy"){
                    titleStr = "销售部-"+this.queryParams1.year+"年-";
                    timestr = this.queryParams1.year+"年";
                }else if(this.queryParams1.qMode=="yq"){
                    titleStr = "销售部-"+this.queryParams1.subTime.replace("_","年第")+"季度-";
                    timestr = this.queryParams1.subTime.replace("_","年第")+"季度";
                }else if(this.queryParams1.qMode=="ym"){
                    titleStr = "销售部-"+this.queryParams1.subTime.replace("-","年")+"月-";
                    timestr = this.queryParams1.subTime.replace("-","年")+"月";
                }else if(this.queryParams1.qMode=="wk"){
                    titleStr = "销售部-"+this.queryParams1.year+"年第"+this.queryParams1.subTime.split("_")[1].replace("wk","周")+"-";
                    timestr = this.queryParams1.year+"年第"+this.queryParams1.subTime.split("_")[1].replace("wk","周");
                }
                const option1 = {
                    title: {
                        text: titleStr+"合同",
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left  : 2,    
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label1
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.ht.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 合同<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.ht.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart1.setOption(option1);

                const option2 = {
                    title: {
                        text: titleStr+"出库",
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label2
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.ck.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 出库<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.ck.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart2.setOption(option2);

                const option3 = {
                    title: {
                        text: titleStr+"预出库",
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label3
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.pht.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 预出库<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.pht.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart3.setOption(option3);
            })
        },
        getYjbmBignameSummary(){
            listXsbYjbmBignameSummary(this.queryParams2).then(res =>{
                let typeName = "";
                for(let i=0;i<this.typeList.length;i++){
                    if(this.queryParams2.type==this.typeList[i].value){
                        typeName = this.typeList[i].label;
                    }
                }
                let labels = [];
                if(res.data.length>0){
                    for(let i=0;i<res.data.length;i++){
                        labels.push(res.data[i].tag_date)
                    }
                }
                let titleStr = "";
                if(this.queryParams2.qMode=="yy"){
                    titleStr = "销售部-"+"各年";
                }else if(this.queryParams2.qMode=="yq"){
                    titleStr = "销售部-"+this.queryParams2.year+"年季度";
                }else if(this.queryParams2.qMode=="ym"){
                    titleStr = "销售部-"+this.queryParams2.year+"年月份";
                }else if(this.queryParams2.qMode=="wk"){
                    titleStr = "销售部-"+this.queryParams2.year+"年各周";
                }
                titleStr = titleStr+"-"+this.queryParams2.brand+"-"+this.queryParams2.bigname+"-"+typeName;
                const chart = echarts.init(this.$refs.chart4);
                const option = {
                    title: {
                        text: titleStr+"-接单走势",
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['数量', '金额'],
                        left: 10
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: labels,
                            axisLabel: {
                                rotate: 45, // 设置 X 轴文字旋转角度
                                interval: 0, // 强制显示所有标签
                                fontSize: 12, // 文字大小
                                color: '#333' // 文字颜色
                            },
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量(颗/株)',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '金额(元)',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.map(item => ({
                                value: item.qty,
                                name: item.tag_date,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+item.tag_date+"<br/>数据类型: "+typeName+"<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>当期金额："+Number(item.money).toFixed(2)+"元<br />当期数量："+item.qty+"<br />当期品类金额占比："+item.bmmoneyrate+"%<br />当期品类数量占比："+item.bmqtyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>环比金额："+Number(item.prev_money).toFixed(2)+"元<br />环比数量："+item.prev_qty+"<br />金额环比率："+(Number(item.money_qoq_growth)*100).toFixed(2)+"%<br />数量环比率："+(Number(item.qty_qoq_growth)*100).toFixed(2)+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:green;'>同比金额："+Number(item.yoy_prev_money).toFixed(2)+"元<br />同比数量："+item.yoy_prev_qty+"<br />金额同比率："+(Number(item.money_yoy_growth)*100).toFixed(2)+"%<br />数量同比率："+(Number(item.qty_yoy_growth)*100).toFixed(2)+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:orange;'>全品类金额："+Number(item.total_money).toFixed(2)+"元<br />全品类数量："+item.total_qty+"<br />-----------------------------</span>",
                            })),
                        },
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.tag_date,
                            })),
                        }
                    ]
                };
                chart.setOption(option);
            })
        },
        getBingnamePlzbSummary(){
            listXsbBingnamePlzbSummary(this.queryParams3).then(res =>{
                let label1 = [];
                for(let i=0;i<res.data.ht.length;i++){
                    label1.push(res.data.ht[i].brand);
                }
                let label2= [];
                for(let i=0;i<res.data.ck.length;i++){
                    label2.push(res.data.ck[i].brand);
                }
                let label3 = [];
                for(let i=0;i<res.data.pht.length;i++){
                    label3.push(res.data.pht[i].brand);
                }
                const chart1 = echarts.init(this.$refs.chart5);
                const chart2 = echarts.init(this.$refs.chart6);
                const chart3 = echarts.init(this.$refs.chart7);
                let titleStr = "";
                let timestr = "";
                if(this.queryParams3.qMode=="yy"){
                    titleStr = "销售部-"+this.queryParams3.year+"年-";
                    timestr = this.queryParams3.year+"年";
                }else if(this.queryParams3.qMode=="yq"){
                    titleStr = "销售部-"+this.queryParams3.subTime.replace("_","年第")+"季度-";
                    timestr = this.queryParams3.subTime.replace("_","年第")+"季度"; 
                }else if(this.queryParams3.qMode=="ym"){
                    titleStr = "销售部-"+this.queryParams3.subTime.replace("-","年")+"月-";
                    timestr = this.queryParams3.subTime.replace("-","年")+"月";
                }else if(this.queryParams3.qMode=="wk"){
                    titleStr = "销售部-"+this.queryParams3.year+"年第"+this.queryParams3.subTime.split("_")[1].replace("wk","周")+"-";
                    timestr = this.queryParams3.year+"年第"+this.queryParams3.subTime.split("_")[1].replace("wk","周");
                }
                titleStr = titleStr+this.queryParams3.brand;
                const option1 = {
                    title: {
                        text: titleStr,
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label1
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.ht.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 合同<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.ht.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart1.setOption(option1);

                const option2 = {
                    title: {
                        text: titleStr,
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label2
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.ck.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 出库<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.ck.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart2.setOption(option2);

                const option3 = {
                    title: {
                        text: titleStr,
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    legend: {
                        data: ['金额', '数量'],
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: label3
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            data: res.data.pht.map(item => ({
                                value: Number(item.money).toFixed(2),
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类: "+item.brand+"<br />时间: "+timestr+"<br/>数据类型: 预出库<br/>部门/片区: 销售部<br />-----------------------------</span>"+
                                "<br/><span style='color:red;'>单品类金额："+Number(item.money).toFixed(2)+"元<br />全品类金额："+Number(item.total_money_brd).toFixed(2)+"元<br />品类接单金额占比："+item.plmoneyrate+"%<br/>-----------------------------</span>"+
                                "<br/><span style='color:blue;'>单品类数量："+item.qty+"<br />全品类数量："+item.total_qty_brd+"<br />品类接单数量占比："+item.plqtyrate+"%<br/>-----------------------------</span>",
                            })),
                        },
                        {
                            name: '数量',
                            type: 'bar',
                            data: res.data.pht.map(item => ({
                                value: Number(item.qty),
                                name: item.brand,
                            })),
                        }
                    ]
                };
                chart3.setOption(option3);
            })
        },
    }
}

</script>